<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 

        1. 创建数组
            * Json 方式 (推荐)
            * 构造器
        
        2. 数组类型
            tpeof 数组 ==> object

        3. 操作数组
            读取
            修改
            添加
            删除

        4. 多维数组
            数组可包含任意类型的数据
            如果数据为数组, 即可形成 多维数组

        5. 字符串数组
            将字符串 当成数组来使用
            第一个字符的索引为: 0
            第二个字符的索引为: 1
            以此类推
    -->


    <script>
        
        var x = [10,20,30];
        console.log(x);

        var x = [];
        console.log(x);
        console.log('-----------------');

        var x = new Array();
        console.log(x);

        var x = new Array(10,20,30,40);
        console.log(x);
        console.log('-------------');

        console.log( typeof x);
        console.log('--------------');
    </script>

    <script>
        var x = ['迪丽热巴', '古力娜扎', '马尔扎哈', '真皮沙发'];

        console.log(x[0]);
        console.log(x[1]);
        console.log(x[2]);
        console.log(x[3]);
        console.log(x[4]);
        console.log('----------------');
    </script>

    <script>
        
        var hero = [
            ['狄仁杰','公孙离','孙尚香'],
            ['孙悟空','猪八戒','秦始皇'],
        ];

        console.log(hero);

        console.log(hero[0]);
        console.log(hero[0][0]);
        console.log(hero[0][1]);
        console.log(hero[1][1]);
        console.log('----------------');
    </script>

    <script>
        
        //遍历数组
        var list = ['刘德华', '郭富城', '张学友' , '黎明'];

        for( var i = 0 ; i< list.length; i++){
            console.log( list[i] );
        }

        document.write('<ul>');
        for(var i = 0; i< list.length; i++){
            document.write('<li style = "color:red">' + list[i] + '</li>');
        }

        document.write('</ul>');
    </script>

    <ul id="book">
        <li>Js权威指南</li>
        <li>细说PHP</li>
        <li>阿里巴巴JAva规范</li>
    </ul>

    <script>
        
        var li = document.getElementById('book').getElementsByTagName('li');

        for(var i = 0; i< li.length; i++){
            li[i].style.color = 'green';
        }


    </script>

    <script>
        var str = 'abcdefg';

        console.log( str[0] );
        console.log( str[1] );
        console.log( str[100] );

        console.log('--------------');

        for(var i = 0 ; i<str.length; i++ ){
            console.log( str[i] );
        }
    </script>
</body>
</html>